import Link from 'next/link'
import Select from '@c/select'
import { getVodCollectionLines } from '@/api/vod'
import { useState, useEffect } from 'react'
import styles from './index.module.scss'
import cm from 'classnames'
import { useRouter } from 'next/router'
import Image from '@c/image'

const Index = props => {
  const { selectionInfo, lineGroup, collectionInfo } = props
  const {
    query: { id: cid, ep }
  } = useRouter()
  const [currLineGroup, updateLineGroup] = useState(lineGroup)
  const [isOffice, setOffice] = useState(true)
  const [playParams, setPlayParams] = useState({
    page: 0,
    sort: 1
  })
  const orderType = [
    { label: '正序', value: 1 },
    { label: '降序', value: 2 }
  ]

  // 更新剧集
  const updateLines = page => {
    setPlayParams({
      ...playParams,
      page
    })
  }
  useEffect(() => {
    if (!playParams.page) {
      return
    }
    const { page, sort } = playParams
    getVodCollectionLines({ cid, page, pageSize: selectionInfo.pageSize, sort }).then(res => {
      updateLineGroup(res.data)
    })
  }, [playParams.page])

  const updateSort = () => {
    setPlayParams({
      ...playParams,
      sort: playParams.sort === 1 ? 2 : 1
    })
    const newData = {
      ...currLineGroup
    }
    newData.eporder = [...newData.eporder].reverse()
    updateLineGroup(newData)
  }

  return (
    <>
      {
        <div className={styles.chooseEporder}>
          <span>选集</span>
          {isOffice ? (
            <img src="/images/switchEporder.webp" alt="切换" onClick={() => setOffice(false)} />
          ) : (
            <img src="/images/switchJuji.webp" alt="切换" onClick={() => setOffice(true)} />
          )}
        </div>
      }
      {!selectionInfo.noSelections && (
        <div className={styles.orderBox}>
          <Select
            width={170}
            className="shrink-0"
            currentValue={selectionInfo.pageNo}
            list={selectionInfo.selectionGroup}
            onChange={updateLines}
          />
          <Select
            list={orderType || []}
            width={110}
            currentValue={1}
            className="ml-2 shrink-0 "
            onChange={updateSort}
          />
        </div>
      )}
      {Array.isArray(currLineGroup?.eporder) && (
        <div className={styles.jujiBox}>
          {currLineGroup.eporder?.map((item, index) => {
            const NodeType = () => {
              if (collectionInfo.isShows) {
                if (!isOffice) {
                  return item.videoName || item.eporder
                }
                return (
                  <>
                    <h2 className={cm(styles.jujiTitle, 'textEllipsis')} title={item.videoName}>
                      <span className="mr-2">{item.videoName ? item.eporder : `第${item.eporder}集`}</span>
                      {item.videoName}
                    </h2>
                    <div className={styles.jujiInfo}>
                      <Image src={item.postUrl || collectionInfo.posterUrl} alt="封面" className={styles.jujiPoster} />
                      <p className={styles.jujiDesc} title={item.overView}>
                        {item.overView || '暂无剧集描述信息'}
                      </p>
                    </div>
                  </>
                )
              } else if (!collectionInfo.isMovie && isOffice) {
                return (
                  <>
                    <h2 className={cm(styles.jujiTitle, 'textEllipsis')} title={item.videoName}>
                      <span className="mr-2">{item.videoName ? item.eporder : `第${item.eporder}集`}</span>
                      {item.videoName}
                    </h2>
                    <div className={styles.jujiInfo}>
                      <Image src={item.postUrl || collectionInfo.posterUrl} alt="封面" className={styles.jujiPoster} />
                      <p className={styles.jujiDesc} title={item.overView}>
                        {item.overView || '暂无剧集描述信息'}
                      </p>
                    </div>
                  </>
                )
              } else {
                return item.eporder
              }
            }
            return (
              <Link
                href={`/vod/play-official/${cid}/${item.eporder}`}
                replace
                key={index}
                className={cm(styles.jujiItem, {
                  [styles.jujiActive]: item.eporder == ep,
                  [styles.jujiShow]: collectionInfo.isShows && !isOffice,
                  textEllipsis: !isOffice && collectionInfo.isShows,
                  [styles.noOffice]: !isOffice,
                  [styles.jujiActiveBorder]: item.eporder == ep && !isOffice,
                  [styles.isOffice]: !isOffice && collectionInfo.isShows
                })}
              >
                <NodeType />
              </Link>
            )
          })}
        </div>
      )}
    </>
  )
}

export default Index
